<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex myInfo_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-stretch justify-between myInfo_fd0_0'>
          <view class='flex flex-wrap align-center myInfo_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <image class='myInfo_fd0_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"286.png"'></image>
          </view>
          <view class='flex flex-wrap align-center'>
            <text class='myInfo_fd0_0_c1_c0'>{{$t('我的资料')}}</text>
          </view>
          <view class='flex align-center justify-end myInfo_fd0_0_c2'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---我的资料flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch">
        <view class='flex flex-direction align-stretch myInfo_fd1_0'>
          <view class='flex flex-wrap align-center myInfo_fd1_0_c0'>
            <text class='myInfo_fd1_0_c0_c0'>{{$t('头像')}}</text>
            <view class="upload position-relative myInfo_fd1_0_c0_c1">
              <!-- #ifdef APP || H5 -->
              <image class=" myInfo_fd1_0_c0_c1_image" mode="aspectFit"
                @tap="croppingUploadImage1('avatar','avatar',dataDetails,dataDetails)"
                :src="dataDetails.avatar ? dataDetails.avatar : STATIC_URL+'219.png'"></image>
              <!-- #endif -->
              <!-- #ifdef MP-WEIXIN -->
              <image class=" myInfo_fd1_0_c0_c1_image" mode="aspectFit"
                @tap="croppingUploadImage('avatar','avatar',dataDetails,dataDetails)"
                :src="dataDetails.avatar ? dataDetails.avatar : STATIC_URL+'219.png'"></image>
              <!-- #endif -->
            </view>
            <image class='myInfo_fd1_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"460.png"'></image>
          </view>
          <view class='flex flex-wrap align-center justify-between myInfo_fd1_0_c1'>
            <text class='myInfo_fd1_0_c0_c0'>{{$t('昵称')}}</text>
            <benben-input class='flex-sub myInfo_fd1_0_c1_c1' type="text" :placeholder="$t('请输入昵称')" confirm-type="done"
              @input="valueInspectFunc($event)" :maxlength="15" placeholder-style="color:#666666;font-size:32rpx"
              v-model="dataDetails.userName" />
          </view>
          <view class='flex flex-wrap align-center justify-between myInfo_fd1_0_c1'
            @tap.stop="pickerDiy1656985489961=true">
            <text class='myInfo_fd1_0_c0_c0'>{{$t('性别')}}</text>
            <benben-input class='flex-sub myInfo_fd1_0_c2_c1' type="text" :placeholder="$t('请选择性别')" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
              v-model="dataDetails.sexNo" />
            <image class='myInfo_fd1_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"460.png"'></image>
          </view>
          <!--     <view   class='flex flex-wrap align-center justify-between flex-sub myInfo_fd1_0_c3'   @tap.stop="pickerDiy1656986153485=true"   >
        <text class='myInfo_fd1_0_c0_c0'  >{{$t('生日')}}</text>
<benben-input class='flex-sub myInfo_fd1_0_c2_c1'   type="text" :placeholder="$t('请选择生日')" confirm-type="done" :maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"  v-model="dataDetails.birthday" />
<image class='myInfo_fd1_0_c0_c2'  mode="aspectFit"  :src='STATIC_URL+"460.png"'></image>
</view>
 -->
        </view>
        <view class='flex flex-wrap align-center justify-center myInfo_fd1_1'>
          <button class='myInfo_fd1_1_c0' @tap.stop="editUserFunc()">{{$t('保存')}}</button>
        </view>
      </view>

      <!---我的资料flex布局结束-->
      <!--选择生日开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1656986153485"
        :value.sync='dataDetails.birthday' mode='date' :picker-height='88' :current='true' :mask-show='true'
        fields='day' :timeout='true' start-year='1920-01-01' end-year='现在'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between myInfo_picker2_0'>
            <text class='myInfo_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text class='myInfo_picker2_0_c1'>选择日期</text>
            <text class='myInfo_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</text>
          </view>
        </template>
      </benben-picker>
      <!--选择生日结束 -->
      <!--选择性别开始 -->
      <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1656985489961" :label.sync='sex'
        :value.sync='dataDetails.sexNo' :options='sexType' mode='selector' :mask-show='true' :timeout='true'
        :picker-height='88' default-type='name' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between myInfo_picker3_0'>
            <text class='myInfo_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
            <text class='myInfo_picker3_0_c1'>选择性别</text>
            <text class='myInfo_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确定</text>
          </view>
        </template>
      </benben-picker>
      <!--选择性别结束 -->


    </view>
  </view>
</template>
<script>
  import UploadImage from '@/common/utils/upload-image.js'
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "pickerDiy1656985489961": false,
        "pickerDiy1656986153485": false,
        "sexType": [{
          "name": "保密",
          "value": "0",
          "image": ""
        }, {
          "name": "男",
          "value": "1",
          "image": ""
        }, {
          "name": "女",
          "value": "2",
          "image": ""
        }],
        "editUser": {},
        sex: '',
        "dataDetails": {
          sexNo: '',
          userName: '',
          avatar: ''
        },
        "isCheck": false
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      }
    },
    watch: {},
    onLoad(options) {
      this.getUserinfoFunc()
      this.diyPageListen()
    },
    onUnload() {
      this.diyOffPageListen()
    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //监听输入框输入事件
      valueInspectFunc(e) {
        var str = e.detail.value
        var newZz = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/gi;
        if (newZz.test(str)) {
          this.$nextTick(() => {
            this.dataDetails.userName = str.replace(newZz, '')

          })
          this.$message.info('昵称不能包含特殊字符');
          return;
        }
      },
      croppingUploadImage1(id, path, obj, obj1, fnName = false) {
        let platform = uni.getSystemInfoSync().platform
        if (platform == 'ios') {
          this.croppingUploadImage(id, path, obj, obj1, fnName = false)
          return
        }
        let self = this
        uni.showModal({
          title: '相机相册信息授权提示',
          content: '用户拍摄/选取内容发布，拍摄/选取图片更换头像，扫描二维码，聊天或者AR识别等功能',
          success(res1) {
            if (res1.confirm) {
              if (!obj) obj = this
              if (!obj1) obj1 = this
              let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']

              function imageCroppingCuccess() {
                uni.$once('image-cropping-success', (file) => {
                  if (!file) return
                  console.log('filefile', file)
                  new UploadImage([file], {
                    complete: (res) => {
                      console.log('res', res)
                      self.dataDetails.avatar = res[0]
                    },
                  })
                })
              }
              uni.showActionSheet({
                itemList: itemList,
                success: function(res) {
                  if (res.tapIndex == 0 && obj1[path]) {
                    uni.navigateTo({
                      url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' +
                        obj1[path],
                      animationDuration: 0,
                    })
                    imageCroppingCuccess()
                  }
                  if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
                    uni.chooseImage({
                      count: 1,
                      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                      sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                      success: (res) => {
                        // 跳转到图片裁切页面
                        uni.navigateTo({
                          url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                          animationDuration: 0,
                        })
                        imageCroppingCuccess()
                      },
                    })
                  }
                  if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
                    uni.chooseImage({
                      count: 1,
                      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                      sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                      success: (res) => {
                        // 跳转到图片裁切页面
                        uni.navigateTo({
                          url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                          animationDuration: 0,
                        })
                        imageCroppingCuccess()
                      },
                    })
                  }
                },
                fail: function(res2) {
                  console.log(res2.errMsg)
                },
              })
            } else if (res1.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },

      //裁剪图片上传
      croppingUploadImage(id, path, obj, obj1, fnName = false) {
        let self = this
        if (!obj) obj = this
        if (!obj1) obj1 = this
        let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']

        function imageCroppingCuccess() {
          uni.$once('image-cropping-success', (file) => {
            if (!file) return
            console.log('filefile', file)
            new UploadImage([file], {
              complete: (res) => {
                console.log('res', res)
                self.dataDetails.avatar = res[0]
              },
            })
          })
        }
        uni.showActionSheet({
          itemList: itemList,
          success: function(res) {
            if (res.tapIndex == 0 && obj1[path]) {
              uni.navigateTo({
                url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' +
                  obj1[path],
                animationDuration: 0,
              })
              imageCroppingCuccess()
            }
            if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
              uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                  // 跳转到图片裁切页面
                  uni.navigateTo({
                    url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                    animationDuration: 0,
                  })
                  imageCroppingCuccess()
                },
              })
            }
            if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
              uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                  // 跳转到图片裁切页面
                  uni.navigateTo({
                    url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                    animationDuration: 0,
                  })
                  imageCroppingCuccess()
                },
              })
            }
          },
          fail: function(res) {
            console.log(res.errMsg)
          },
        })
      },
      //修改个人信息
      async editUserFunc() {
        if (this.isCheck === true) {
          return
        } else {
          this.isCheck = true;
          //请求方法
          //数据验证

          let datadataMessage = await this.$api.post(global.apiUrls.modUserSelfInfo, {
            id: this.dataDetails.id,
            avatar: this.dataDetails.avatar,
            userName: this.dataDetails.userName,
            sexNo: this.dataDetails.sexNo,
          });

          if (datadataMessage.data.code != 0) {
            this.$message.info(datadataMessage.data.msg);
            return
          }
          let infodataMessage = datadataMessage.data;
          this.dataMessage = infodataMessage.data

          this.$store.commit('updateUserInfo', this.dataMessage)
          setTimeout(() => {
            this.isCheck = false;
          }, 500)
          uni.showToast({
            title: global.i18n.t('保存成功'),
            mask: true,
            icon: 'none',
            duration: 1500
          });
          setTimeout(() => {
            this.$urouter.navigateBack(1);
          }, 800)
        }
      },
      //获取个人信息
      async getUserinfoFunc(data) {
        let datadataDetails = await this.$api.get(global.apiUrls.getUserInfo, {

        });

        if (datadataDetails.data.code != 0) {
          this.$message.info(datadataDetails.data.msg);
          return
        }
        let infodataDetails = datadataDetails.data;
        this.dataDetails = infodataDetails.data

      },
      //页面监听
      diyPageListen() {
        uni.$on('chengeName', (data) => {
          this.getUserinfoFunc(data)
        });
      },
      //注销页面监听
      diyOffPageListen() {
        uni.$off('chengeName');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(248, 248, 248, 1);
    background-size: 100% auto;
  }

  .myInfo_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .myInfo_fd0_0_c2 {
    padding: 0rpx 0rpx 0rpx 0rpx;
    width: 100rpx;
  }

  .myInfo_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
  }

  .myInfo_fd0_0_c0_c0 {
    width: 18rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .myInfo_fd0_0_c0 {
    width: 100rpx;
  }

  .myInfo_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .myInfo_fd1_1_c0 {
    background: var(--benbenbgColor7);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: #fff;
    width: 686rpx;
    height: 88rpx;
    line-height: 88rpx;
  }

  .myInfo_fd1_1 {
    position: fixed;
    left: 0rpx;
    bottom: calc(40rpx + var(--window-bottom));
    width: 750rpx;
  }

  .myInfo_fd1_0_c3 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .myInfo_fd1_0_c2_c1 {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
    text-align: right;
    color: rgba(102, 102, 102, 1);
  }

  .myInfo_fd1_0_c1_c1 {
    text-align: right;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .myInfo_fd1_0_c1 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .myInfo_fd1_0_c0_c2 {
    width: 20rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .myInfo_fd1_0_c0_c1_image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
  }

  .myInfo_fd1_0_c0_c1 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    margin: 0rpx 0rpx 0rpx auto;
  }

  .myInfo_fd1_0_c0_c0 {
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .myInfo_fd1_0_c0 {
    border-bottom: 1px solid #eee;
    line-height: 148rpx;
  }

  .myInfo_fd1_0 {
    background: var(--benbenbgColor1);
    padding: 0rpx 32rpx 0rpx 32rpx;
    background-size: 100% auto !important;
    margin: 0rpx 0rpx 150rpx 0rpx;
  }

  .myInfo_picker2_0_c2 {
    color: var(--benbenFontColor5);
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
  }

  .myInfo_picker2_0_c1 {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
  }

  .myInfo_picker2_0_c0 {
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #BFBFBF;
  }

  .myInfo_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .myInfo_picker3_0_c2 {
    color: var(--benbenFontColor5);
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
  }

  .myInfo_picker3_0_c1 {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
  }

  .myInfo_picker3_0_c0 {
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #BFBFBF;
  }

  .myInfo_picker3_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }
</style>
